<template>
  <div class="floor-line" :class="{'mobile': mobile}">
    <el-icon class="mr10" color="var(--el-color-primary)"><Coin /></el-icon>
    <el-checkbox
      v-model="checkAll"
      style="margin-right: 20px;"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
      >全部</el-checkbox
    >
    <el-checkbox-group
      v-model="checkedFloor"
      @change="handleCheckedChange"
    >
      <el-checkbox v-for="floor in option" :key="floor.value" :label="floor.value">
        {{ floor.label }}
      </el-checkbox>
    </el-checkbox-group>
    <el-dropdown 
      trigger="click"
      placement="bottom-start"
      @command="floorCommand"
    >
      <el-icon class="ml20" color="var(--el-color-primary)" style="cursor: pointer;"><MoreFilled /></el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="updateBuilding">编辑整栋</el-dropdown-item>
          <el-dropdown-item command="delBuilding">删除整栋</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dialog v-model="updateBuildingVisible" width="500px" title="编辑整栋" @close="handleClose" :fullscreen="mobile">
      <el-form :model="form" ref="updateBuildingRef">
        <el-form-item label="整栋名称" prop="name" :rules="[{ required: true, message: '请输入楼栋名称', trigger: 'blur' }]">
          <el-input v-model="form.name" placeholder="请输入楼栋名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="FloorLine">
import { Coin, MoreFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import useAppStore from '@/store/modules/app'
import buildApi from '@/api/room/building'

// 提示：删除后，房间信息、业主信息、业主账单、将被删除，不可恢复！

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
  buildingId: {
    type: [Number, String],
    default: ''
  },
  option: {
    type: Array,
    default: () => []
  }
})

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedFloor = ref([])
const updateBuildingVisible = ref(false)
const mobile = computed(() => useAppStore().device === 'mobile')

const data = reactive({
  form: {
    name: undefined
  }
})
const { form } = toRefs(data)
watch(() => props.option, (newOption) => {
  checkedFloor.value = newOption.map(item => item.value)
  checkAll.value = true
  // emit('lineChange', checkedFloor.value)
})

// 全选按钮发生变化
const handleCheckAllChange = (val) => {
  checkedFloor.value = val ? props.option.map(item => item.value) : []
  isIndeterminate.value = false
  emit('lineChange', checkedFloor.value)
}
// 复选框组发生变化
const handleCheckedChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === props.option.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.option.length
  emit('lineChange', checkedFloor.value)
}

// 删除楼栋提示框
function delMessageBox() {
  ElMessageBox.confirm(
    '提示：删除后，房间信息、业主信息、业主账单、将被删除，不可恢复！',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customStyle: 'width: 320px;'
    }
  )
    .then(() => {
      buildApi.remove(props.buildingId).then(res => {
        emit('delete')
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
    })
    .catch(() => console.log('delete...'))
}

function floorCommand(value) {
  switch (value) {
    case 'updateBuilding':
      reset()
      updateBuildingVisible.value = true
      break
    case 'delBuilding':
      delMessageBox()
      break
    default:
      break
  }
}
// 重置编辑整栋表单
function reset() {
  form.value = {
    name: undefined
  }
  proxy.resetForm('updateBuildingRef')
}

function handleClose() {
  updateBuildingVisible.value = false
  console.log(form.value);
}
function handleOk() {
  proxy.$refs['updateBuildingRef'].validate(valid => {
    if (valid) {
      const params = {
        buildingId: props.buildingId,
        name: form.value.name
      }
      buildApi.editBuilding(params).then(res => {
        proxy.$modal.msgSuccess('修改成功')
        updateBuildingVisible.value = false
        emit('edit')
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.floor-line {
  display: flex;
  align-items: center;
  // 修改复选框样式
  :deep(.el-checkbox) {
    --el-checkbox-height: 24px;
    margin-right: 5px;
    border-radius: var(--el-border-radius-base);
    border: 1px solid var(--el-border-color);
    background-color: var(--el-fill-color-blank);
    .el-checkbox__input {
      display: none;
    }
    .el-checkbox__label {
      margin-right: 8px;
    }
  }
  :deep(.is-checked) {
    border: 1px solid var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
  }
}
.mobile {
  position: relative;
  padding-right: 34px;
  .el-checkbox-group {
    display: flex;
    flex: 1;
    overflow-x: auto;
    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
  }
  .el-dropdown {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 5px;
  }
}
</style>